<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="	https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
    <style>
        .red {
            color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="container">
            <!-- 顶部搜索框模块 -->
            <div class="form-group">
                <div class="input-group">
                    <h4>品牌管理</h4>
                </div>
            </div>
            <!-- 数据表格 -->
            <table class="table table-bordered table-hover mt-2">
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>资产名称</th>
                        <th>价格</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in list" :key="item.id">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td :class="{red: item.price > 100}">{{item.price}}</td>
                        <td>{{formatTime(item.time)}}</td>
                        <td><a href="#" @click.prevent="removeItem(index)">删除</a></td>
                    </tr>
                    <tr v-if="list.length" style="background-color: #EEE">
                        <td>统计:</td>
                        <td colspan="2">总价钱为: {{total}}</td>
                        <td colspan="2">平均价: {{average}}</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr v-if="!list.length">
                        <td colspan="5" style="text-align: center">暂无数据</td>
                    </tr>
                </tfoot>
            </table>

            <!-- 添加资产 -->
            <form @submit.prevent="addAsset" class="row g-3 align-items-center">
                <div class="col-auto">
                    <input type="text" class="form-control" v-model="newName" placeholder="资产名称" required />
                </div>
                <div class="col-auto">
                    <input type="number" class="form-control" v-model.number="newPrice" placeholder="价格" required min="0" />
                  </div>
                <div class="col-auto">
                    <button class="btn btn-primary" :disabled="!newName || !newPrice">添加资产</button>
                </div>
            </form>
        </div>
    </div>
</body>

</html>
<script src="./js/2.7.14_dist_vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            newName: '',
            newPrice: null,
            list:[
                {id: 100,name: "外套",price: 199,time: new Date('2010-08-12')},
                {id: 101,name: "裤子",price: 34,time: new Date('2013-09-01')},
                {id: 102,name: "鞋",price: 25.4,time: new Date('2018-11-22')},
                {id: 103,name: "头发",price: 19900,time: new Date('2020-12-12')}
            ]
        },
        computed: {
      total() {
        return this.list.reduce((total, item) => total + item.price, 0);
      },
      average() {
        return this.list.length ? this.total / this.list.length : 0;
      }
    },
    methods: {
      formatTime(time) {
        return moment(time).forma("YYYY-MM-DD HH:mm:ss");
      },
      removeItem(index) {
        this.list.splice(index, 1);
        this.saveToLocalStorage();
      },
      addAsset() {
        if (!this.newName || this.newPrice === null) {
          alert("请输入完整的资产信息！");
          return;
        }
        if (this.newPrice < 0) {
          alert("价格不能低于0!");
          return;
        }
        const newItem = {
          id: this.list.length ? Math.max(...this.list.map(item => item.id)) + 1 : 100,
          name: this.newName,
          price: this.newPrice,
          time: new Date()
        };
        this.list.push(newItem);
        this.newName = '';
        this.newPrice = null;
        this.saveToLocalStorage();
      },
      saveToLocalStorage() {
        localStorage.setItem('assetList', JSON.stringify(this.list));
      }
    },
  });
</script>